<template>
  <div class="container">
    <el-form ref="dictFormRef" :model="form" label-position="top" :rules="rules" label-width="80px">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <!-- 基本信息 -->
        <el-tab-pane label="基本信息" name="first">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="姓" prop="dictType">
                <el-input v-model="form.dictType" placeholder="请输入字典类型" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="名" prop="dictType">
                <el-input v-model="form.dictType" placeholder="请输入字典类型" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="城市" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="国家" prop="remark">
                <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="城市/省份" prop="remark">
                <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="邮政编码" prop="remark">
                <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="街道" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="出生日期" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="电话号码" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="What is your biological sex?" prop="remark">
            <el-radio-group v-model="radio">
              <el-radio :value="3">Male</el-radio>
              <el-radio :value="6">Female</el-radio>
              <el-radio :value="9">Intersex</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-tab-pane>
        <!-- 账号信息 -->
        <el-tab-pane label="账号信息" name="second">
          <el-form-item label="邮箱" prop="dictName">
            <el-input v-model="form.dictName" placeholder="请输入字典名称" />
          </el-form-item>
          <el-form-item label="密码" prop="dictType">
            <el-input v-model="form.dictType" placeholder="请输入字典类型" />
          </el-form-item>
        </el-tab-pane>
        <!-- 信息控制 -->
        <el-tab-pane label="信息控制" name="third">
          <el-form-item label="When we add new donor to our platform, how often would you like to receive an email?" prop="dictName">
            <el-input v-model="form.dictName" placeholder="请输入字典名称" />
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>

<script setup name="Dict" lang="ts">
const { queryParams, form, rules } = toRefs(data);
const data = reactive<PageData<DictTypeForm, DictTypeQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    dictName: '',
    dictType: ''
  },
  rules: {
    dictName: [{ required: true, message: '字典名称不能为空', trigger: 'blur' }],
    dictType: [{ required: true, message: '字典类型不能为空', trigger: 'blur' }]
  }
});
</script>
